<template>
    <div class="Shop-Page">
      <div class="panel-body">
      <input class="form-control" v-model="search" style="width: 400px;float:left" placeholder="搜索商品名">
        <el-button type="primary" style="float: right">添加商品<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      <el-table :data="ShopList">
        <el-table-column prop="id" label="商品编号"/>
        <el-table-column  label="商品图片">
          <template scope="scope">
            <img :src="scope.row.picture" class="thumbnail ww"/>
          </template>
        </el-table-column>
        <el-table-column prop="shopname" label="商品名称"/>
        <el-table-column prop="price" label="商品价格"/>
        <el-table-column label="商品操作">
          <template scope="scope">
            <router-link :to="'/'+scope.row.id" style="color: #177676">编辑</router-link>
            <router-link :to="'/'+scope.row.id" style="color: #145050">删除</router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
  export default {
    name: 'ShopList',
    data(){
      return {
        search:'',
        shops:[]
      }
    },
    computed:{
     ShopList(){
        return this.shops.filter(shop=>{
          return shop.shopname.indexOf(this.search)!=-1
        });
      }
    },
    mounted() {
      this.$http.get('/shop').then(resp=>{
        this.shops = resp.data;
      }).catch(err=>console.log(err));
    }
  }
</script>
<style lang="less">
    .Shop-Page {
    }
  .ww{
    width: 70px;height:50px;margin-bottom: 0;
  }
</style>
